﻿@inject IStringLocalizer<InputNumbersColor> Localizer

<p>@Localizer["InputNumbersColorDescription1"]</p>
<div class="row g-3">
    <div class="col-12 col-sm-6">
        <div class="demo-inputnumber">
            <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.None" />
        </div>
    </div>
    <div class="col-12 col-sm-6">
        <div class="demo-inputnumber">
            <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Primary" />
        </div>
    </div>
    <div class="col-12 col-sm-6">
        <div class="demo-inputnumber">
            <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Success" />
        </div>
    </div>
    <div class="col-12 col-sm-6">
        <div class="demo-inputnumber">
            <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Info" />
        </div>
    </div>
    <div class="col-12 col-sm-6">
        <div class="demo-inputnumber">
            <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Warning" />
        </div>
    </div>
    <div class="col-12 col-sm-6">
        <div class="demo-inputnumber">
            <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Danger" />
        </div>
    </div>
    <div class="col-12 col-sm-6">
        <div class="demo-inputnumber">
            <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Dark" />
        </div>
    </div>
    <div class="col-12 col-sm-6">
        <div class="demo-inputnumber">
            <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Secondary" />
        </div>
    </div>
</div>
<p class="mt-3">@Localizer["InputNumbersColorDescription2"]</p>
<div class="row g-3">
    <div class="col-12 col-sm-6">
        <div class="demo-inputnumber">
            <BootstrapInputNumber Value="10" Color="Color.None" />
        </div>
    </div>
    <div class="col-12 col-sm-6">
        <div class="demo-inputnumber">
            <BootstrapInputNumber Value="10" Color="Color.Primary" />
        </div>
    </div>
    <div class="col-12 col-sm-6">
        <div class="demo-inputnumber">
            <BootstrapInputNumber Value="10" Color="Color.Success" />
        </div>
    </div>
    <div class="col-12 col-sm-6">
        <div class="demo-inputnumber">
            <BootstrapInputNumber Value="10" Color="Color.Info" />
        </div>
    </div>
    <div class="col-12 col-sm-6">
        <div class="demo-inputnumber">
            <BootstrapInputNumber Value="10" Color="Color.Warning" />
        </div>
    </div>
    <div class="col-12 col-sm-6">
        <div class="demo-inputnumber">
            <BootstrapInputNumber Value="@BindFloatValue" Color="Color.Danger" FormatString="#.##" />
        </div>
    </div>
    <div class="col-12 col-sm-6">
        <div class="demo-inputnumber">
            <BootstrapInputNumber Value="@BindDoubleValue" Color="Color.Dark" FormatString="#.##" />
        </div>
    </div>
    <div class="col-12 col-sm-6">
        <div class="demo-inputnumber">
            <BootstrapInputNumber Value="@BindDecimalValue" Color="Color.Secondary" FormatString="#.##" />
        </div>
    </div>
</div>

<style>
    .demo-inputnumber {
        width: 160px;
    }

        .demo-inputnumber > .form-control {
            width: inherit;
        }
</style>

@code {
    /// <summary>
    /// BindDoubleValue
    /// </summary>
    public double BindDoubleValue { get; set; } = 10;

    /// <summary>
    /// BindFloatValue
    /// </summary>
    public float BindFloatValue { get; set; } = 10;

    /// <summary>
    /// BindDecimalValue
    /// </summary>
    public decimal BindDecimalValue { get; set; } = 10;
}
